<template>
  <view class="pets">
    <view class="box">
      <view class="card flex-a">
        <view class="pic">
          <image
            :src="baseFormData.petPhoto ? baseFormData.petPhoto : 'https://cxj.szzkba.cn/up/uploadPath/icon/pPt0BSP.png'"
            v-if="baseFormData.petType == 1" mode="widthFix" />
          <image
            :src="baseFormData.petPhoto ? baseFormData.petPhoto : 'https://cxj.szzkba.cn/up/uploadPath/icon/pPaqXAU.png'"
            v-if="baseFormData.petType == 0" mode="widthFix" />
        </view>
        <view class="info">
          <view class="name">昵称：<text>{{ baseFormData.petName }}</text></view>
          <view class="sex">性别：<text>{{ baseFormData.petSex == 0 ? '弟弟' : baseFormData.petSex == 1 ? '妹妹' : '' }}</text>
          </view>
          <view class="bir">生日：<text>{{ baseFormData.petDate }}</text></view>
        </view>
      </view>
    </view>
    <view class="perfect-info">
      <view class="head">请完善宠物信息</view>
      <view class="example">
        <nut-form ref="baseForm" :rules="rules" :modelValue="baseFormData" label-width="80px">
          <nut-form-item label="种类" prop="petType" required name="petType"
            :rules="[{ required: true, message: '请选择种类' }]">
            <view @click="showPop('type')">{{ petType || '请选择种类' }}</view>
          </nut-form-item>
          <nut-form-item label="昵称" required prop="petName" name="petName"
            :rules="[{ required: true, message: '请输入爱宠昵称' }]">
            <nut-input v-model="baseFormData.petName" placeholder="请输入爱宠昵称" />
          </nut-form-item>
          <nut-form-item label="品种" required prop="petVar" name="petVar"
            :rules="[{ required: true, message: '请输入爱宠品种' }]">
            <nut-input v-model="baseFormData.petVar" placeholder="请输入爱宠品种" />
          </nut-form-item>
          <nut-form-item label="生日" required prop="petDate" name="petDate"
            :rules="[{ required: true, message: '请选择日期' }]">
            <view @click="showPop('bir')">{{ petDate || '请选择日期' }}</view>
          </nut-form-item>
          <nut-form-item label="性别" required prop="petSex" name="petSex" :rules="[{ required: true, message: '请选择性别' }]">
            <view @click="showPop('sex')">{{ petSex || '请选择性别' }}</view>
          </nut-form-item>
          <nut-form-item label="绝育情况" required prop="petSter" name="petSter"
            :rules="[{ required: true, message: '请选择绝育情况' }]">
            <nut-radio-group v-model="baseFormData.petSter">
              <nut-radio v-for="item in states" :label="item.value">{{ item.text }}</nut-radio>
            </nut-radio-group>
          </nut-form-item>
          <nut-form-item label="狗狗照片" name="petPhoto">
            <view class="flex-a">
              <view style="margin-right: 20rpx;">
                <view>
                  <nut-uploader :url="uploadUrl" @success="uploadImg1" maximum="1"></nut-uploader>
                </view>
                <view class="txt">正面照</view>
              </view>
            </view>
          </nut-form-item>
          <nut-button type="info" block @click="submit">{{ id ? '更新' : '领取' }}宠物身份证</nut-button>
          <nut-button type="primary" block @click="del" v-if="id">删除宠物身份证</nut-button>
        </nut-form>
      </view>
    </view>
    <nut-popup position="bottom" v-model:visible="show">
      <nut-picker v-if="type == 'type'" :columns="types" title="选择" @confirm="confirm"
        @cancel="show = false"></nut-picker>
      <nut-date-picker v-if="type == 'bir'" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true"
        @confirm="confirm" @cancel="show = false"></nut-date-picker>
      <nut-picker v-if="type == 'sex'" :columns="sexs" title="选择" @confirm="confirm" @cancel="show = false"></nut-picker>
    </nut-popup>
    <nut-dialog :content="'是否确认删除：' + baseFormData.petName" v-model:visible="visible" @cancel="visible = false"
      @ok="onOk" />
  </view>
</template>

<script>
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted, ref } from 'vue';
import { Comment } from '@nutui/icons-vue-taro';
import { addPet, getPetInfo, updatePet, delPet } from '../../../api/index'
import { uploadUrl } from '../../utils'
export default {
  name: 'pet',
  components: {
    Comment
  },
  setup() {
    const petAllPhoto = ref('')
    const petPhoto = ref('')
    const minDate = new Date(1980, 0, 1);
    const maxDate = new Date();
    const baseForm = ref < any > (null);
    const data = reactive({
      show: false,
      minDate: minDate,
      maxDate: maxDate,
      uploadUrl: uploadUrl,
      baseFormData: {
        petName: '',
        petType: 1,
        petDate: '',
        petSter: '',
        petPhoto: '',
        petAllPhoto: ''
      },
      types: [{
        text: '请选择',
        value: -1
      }, {
        text: '猫猫',
        value: '0'
      }, {
        text: '狗狗',
        value: '1'
      }],
      sexs: [{
        text: '弟弟',
        value: '0'
      }, {
        text: '妹妹',
        value: '1'
      }],
      states: [{
        text: '未绝育',
        value: '0'
      }, {
        text: '已绝育',
        value: '1'
      }, {
        text: '未知',
        value: '2'
      }],
      type: '',
      petType: '',
      petDate: '',
      petSex: '',
      id: '',
      visible: false
    });

    onMounted(() => {
      //console.log(process.env.NODE_ENV)
      const router = useRouter();
      if (router.params.id) {
        data.id = router.params.id
        //console.log(data.id)
        getDetail(router.params.id)
      }
    });
    const getDetail = (id) => {
      getPetInfo(id).then(res => {
        if (res.resultCode == 200) {
          data.baseFormData = res.data
          data.petType = res.data.petType == '0' ? '猫猫' : '狗狗'
          data.petSex = res.data.petSex == '0' ? '弟弟' : '妹妹'
          data.petDate = res.data.petDate
        }
      })
    }
    const showPop = (type) => {
      data.type = type
      data.show = true
    }
    const jumpTo = () => {
      // Taro.navigateTo({ url: '/pages/rewards/index' });
    }
    const confirm = ({ selectedValue, selectedOptions }) => {
      //console.log(selectedValue[0], selectedOptions)
      if (data.type == 'type') {
        data.baseFormData.petType = selectedValue[0]
        data.petType = selectedOptions[0].text
        //console.log(data.baseFormData.petType)
      } else if (data.type == 'bir') {
        data.baseFormData.petDate = selectedValue.map((val) => val).join('-')
        data.petDate = selectedOptions.map((val) => val.text).join('')
      } else if (data.type == 'sex') {
        data.baseFormData.petSex = selectedValue[0]
        data.petSex = selectedOptions[0].text
      }
      data.show = false;
    };
    const validate = (item) => {
      console.log(item);
    };
    const submit = () => {
      baseForm.value.validate().then(({ valid, errors }) => {
        if (valid) {
          data.baseFormData.petAllPhoto = petAllPhoto.value
          data.baseFormData.petPhoto = petPhoto.value
          if (!data.id) {
            addPet(data.baseFormData).then(res => {
              if (res.resultCode == 200) {
                Taro.showToast({
                  title: '领取成功!',
                  icon: 'success',
                  duration: 2000
                })
                Taro.navigateTo({ url: '/pages/petIDList/index' })
              }
            })
          } else {
            updatePet(data.baseFormData).then(res => {
              if (res.resultCode == 200) {
                Taro.showToast({
                  title: '更新成功!',
                  icon: 'success',
                  duration: 2000
                })
                Taro.navigateTo({ url: '/pages/petIDList/index' })
              }
            })
          }
        } else {
          console.log('error submit!!', errors);
        }
      });
    }
    const uploadImg1 = (data) => {
      if (JSON.parse(data.data.data).resultCode == 200) {
        petAllPhoto.value = JSON.parse(data.data.data).message
        //console.log(petAllPhoto.value)
      }
    }
    const uploadImg2 = (data) => {
      if (JSON.parse(data.data.data).resultCode == 200) {
        petPhoto.value = JSON.parse(data.data.data).message
      }
    }
    const del = () => {
      data.visible = true
    }
    const onOk = () => {
      delPet(data.id).then(res => {
        if (res.resultCode == 200) {
          Taro.showToast({
            title: '删除成功!',
            icon: 'success',
            duration: 2000
          })
          Taro.navigateTo({ url: '/pages/petIDList/index' })
        }
      })
    }
    return {
      ...toRefs(data), jumpTo, showPop, confirm, submit, uploadImg1, uploadImg2, petAllPhoto, petPhoto, getDetail, del, onOk, validate, baseForm
    }
  }
}
</script>
<style lang="scss">
.pets {
  .box {
    padding: 20rpx 50rpx;

    .title {
      font-size: 50rpx;
      font-weight: bold;
      color: #2B3033;
    }

    .sub {
      font-size: 24rpx;
      color: #293537;
      font-weight: bold;
      letter-spacing: 6rpx;
      margin: 10rpx 0 20rpx;
    }

    .card {
      border-radius: 20rpx;
      background: #FC6B73;
      padding: 40rpx 50rpx 10rpx 0;

      .pic {
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .info {
        view {
          margin-bottom: 10rpx;
          letter-spacing: 4rpx;

          text {
            display: inline-block;
            width: 100rpx;
            height: 30rpx;
            line-height: 30rpx;
            padding-left: 10rpx;

            border-radius: 5rpx;
            margin-left: 20rpx;
          }
        }

        .name {
          color: rgba(255, 255, 255, 0.7);
          font-size: 30rpx;
        }

        .sex {
          color: rgba(255, 255, 255, 0.7);
        }

        .bir {
          color: rgba(255, 255, 255, 0.7);
          white-space: nowrap;

          text {
            width: 240rpx;
          }
        }
      }
    }
  }

  .perfect-info {
    padding: 0 40rpx 20rpx;

    .head {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      letter-spacing: 4rpx;
      margin-bottom: 20rpx;
    }

    .example {
      .upload {
        color: #EA9973;
        font-size: 44rpx;
        width: 120rpx;
        text-align: center;
        height: 120rpx;
        line-height: 120rpx;
        background: #F8F8F8;
        border-radius: 10rpx;
      }

      image {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .segmented-control {
      margin-bottom: 15px;
    }

    .button-group {
      margin-top: 15px;
      display: flex;
      justify-content: space-around;
    }

    .form-item {
      display: flex;
      align-items: center;
    }

    .button {
      display: flex;
      align-items: center;
      height: 35px;
      margin-left: 10px;
    }

    button {
      // background: #1777FF;
      height: 80rpx;
      line-height: 80rpx;
      letter-spacing: 8rpx;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }

    .uni-data-checklist {
      top: 10rpx;
    }

    .example-body {
      padding: 10px;
      padding-top: 0;
    }

    .txt {
      color: #9E9E9E;
      font-size: 22rpx;
      margin-top: 10rpx;
      text-align: center;
    }

    .kefu {
      text-align: center;
      color: #4080C8;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
